<template>
	<div class="overseas">
		<div class="lb"></div>
		<div class="photo">
			<div class="photo-main">
				<div v-on:click="back">
					<Icon type="ios-arrow-back" style="font-size: 25px;" />
				</div>
				<div>
					<p><Icon type="ios-search" style="font-size: 25px;" /></p>
					<p class="put">{{put}}</p>
				</div>
				<div>
					<Icon type="ios-chatbubbles-outline" style="font-size: 25px;" />
				</div>
			</div>			
		</div>
		<div class="dq">
			<div class="dq-main">
				<publicover :model="model"></publicover>
			</div>
		</div>
		<div class="xuan">
			<div class="xuan-main">
				<publicover2 :model2="model2"></publicover2>
			</div>
		</div>
		<div class="lunbo">
			<div class="lunbo-main">
				<overswiper :imgdata="imgdata"></overswiper>
			</div>
		</div>
		<div class="fl">
			<div class="fl-main">
				<overfl :fldata="fldata"></overfl>
			</div>
		</div>
		<div class="zx">
			<div class="zx-main">
				<div>热门资讯</div>
				<div>更多资讯</div>
				<div><Icon type="ios-arrow-forward" /></div>
			</div>
		</div>
		<div class="zxp">
			<div class="zxp-main">
				<overzx :zxdata="zxdata"></overzx>
			</div>
		</div>
		<div class="tjfy">
			<div class="tjfy-main">
				<div>推荐房源</div>
				<div>新房</div>
				<div>二手房</div>
			</div>
		</div>
		<div class="xq">
			<div class="xq-main">
				<overxq :xqdata="xqdata"></overxq>
			</div>
		</div>
	</div>
</template>

<script>
	import publicover from "./publicover";
	import publicover2 from "./publicover2";
	import overswiper from "./overswiper";
	import overfl from "./overfl";
	import overzx from "./overzx";
	import overxq from "./overxq"

	export default {
	  name: 'overseas',
	  data(){
		  return{
			  put: '请输入地区或城市搜索房源',
			  model:[
				{
					tu:require("../../../static/img/overseas/mg.png"),
					txt:"美国"
				},
				{
					tu:require("../../../static/img/overseas/adly.png"),
					txt:"中国"
				},
				{
					tu:require("../../../static/img/overseas/jnd.png"),
					txt:"加拿大"
				},
				{
					tu:require("../../../static/img/overseas/rb.png"),
					txt:"日本"
				},
				{
					tu:require("../../../static/img/overseas/yg.png"),
					txt:"英国"
				},
				{
					tu:require("../../../static/img/overseas/tg.png"),
					txt:"泰国"
				},
				{
					tu:require("../../../static/img/overseas/dg.png"),
					txt:"德国"
				},
				{
					tu:require("../../../static/img/overseas/xxl.png"),
					txt:"新西兰"
				},
				{
					tu:require("../../../static/img/overseas/fg.png"),
					txt:"法国"
				},
				{
					tu:require("../../../static/img/overseas/gd.png"),
					txt:"更多"
				}, 
			  ],
			  model2:[
				{
					tu:require("../../../static/img/overseas/qqfy.png"),
					txt:"全球房源"
				},{
					tu:require("../../../static/img/overseas/bwzf.png"),
					txt:"帮我找房"
				},{
					tu:require("../../../static/img/overseas/bk.png"),
					txt:"卖房必看"
				},{
					tu:require("../../../static/img/overseas/sp.png"),
					txt:"视频"
				},{
					tu:require("../../../static/img/overseas/wd.png"),
					txt:"问答"
				},
				  
			  ],
			  imgdata:[
			  				{href:require("../../../static/img/overseas/sp1.png")},
			  				{href:require("../../../static/img/overseas/sp2.png")},
			  				{href:require("../../../static/img/overseas/sp3.png")},
			  				{href:require("../../../static/img/overseas/sp4.png")}
			  				
			  			],
			fldata:[
				{tu:require("../../../static/img/overseas/fl1.png")},
				{tu:require("../../../static/img/overseas/fl2.png")},
				{tu:require("../../../static/img/overseas/fl3.png")},
				{tu:require("../../../static/img/overseas/fl4.png")}
			],
			zxdata:[
				{tu:require("../../../static/img/overseas/zx1.png")},
				{tu:require("../../../static/img/overseas/zx2.png")},
			],
			xqdata:[
				{
					// tu:require("../../../static/img/overseas/qx1.png"),
					// title:"约克花园",
					// guige:"3室",
					// daxiao:"91m²",
					// type:"公寓、精装修、带花园、户型方正",
					// pric:"482"
				},		
			]
		  }
	  },
	  mounted() {
	  	this.$ajax({
	  			method: 'post',
	  			url: '/housing/over'
	  		}).then((res)=> {
	  			this.xqdata=res.data;
	  		})
	  		.catch((err)=> {
	  			console.log(err)
	  		});
	  },
	  components:{
		  publicover,
		  publicover2,
		  overswiper,
		  overfl,
		  overzx,
		  overxq
	  },
	  methods: {
	  	back() {
	  		 this.$router.go(-1);//返回上一层
	  	}
	  },
	 
	}
</script>

<style scoped>
	.lb{
		width: 100%;
		height: 0.2rem;
		position: fixed;
		top: 0;
		background: white;
		z-index: 999;
	}
	.photo{
		width: 100%;
		height: auto;
		position: fixed;
		top: 0.2rem;
		background: white;
		z-index: 999;
	}
	.photo-main{
		width: 6.93rem;
		height: 0.65rem;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.photo-main>div:nth-of-type(1){
		width: 0.23rem;
		height: 0.65rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.photo-main>div:nth-of-type(2){
		width: 5.53rem;
		height: 0.65rem;
		background: #e8e8e8;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}
	.photo-main>div:nth-of-type(2)>p{
		margin-left: 0.25rem;
	}
	.put{
		text-align: center;
		line-height: 0.65rem;
		color: #949799;
		font-size: 0.25rem;
	}
	.photo-main>div:nth-of-type(3){
		width: 0.46rem;
		height: 0.65rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dq{
		width: 100%;
		height: 3.04rem;
		margin-top:1rem;
	}
	.dq-main{
		width: 6.93rem;
		height: 100%;
		margin: auto;
	}
	.xuan{
		width: 100%;
		height: 0.95rem;
	}
	.xuan-main{
		width: 6.55rem;
		height: 100%;
		margin: auto;
		margin-top: 0.45rem;
	}
	.lunbo{
		width: 100%;
		height: 2.2rem;
		margin-top: 0.42rem;
	}
	.lunbo-main{
		width: 6.55rem;
		height: 100%;
		margin: auto;
		border-radius: 0.05rem;
	}
	.fl{
		width: 100%;
		height: 3.4rem;
		margin-top: 0.24rem;
	}
	.fl-main{
		width: 6.55rem;
		height: 100%;
		margin: auto;		
	}
	.zx{
		width: 100%;
		height: 0.41rem;
		margin-top: 0.65rem;
	}
	.zx-main{
		width: 6.55rem;
		height: 100%;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}
	.zx-main>div:nth-of-type(1){
		font-size: 0.3rem;
		line-height: 0.41rem;
		font-weight: bold;
		color: black;
	}
	.zx-main>div:nth-of-type(2){
		margin-left: 3.5rem;
		font-size: 0.3rem;
		line-height: 0.41rem;
	}
	.zx-main>div:nth-of-type(3){
		line-height: 0.41rem;
	}
	.zxp{
		width: 100%;
		height: 1.63rem;
		margin-top: 0.35rem;
	}
	.zxp-main{
		width: 6.55rem;
		height: 100%;
		margin: auto;
	}
	.tjfy{
		width: 100%;
		height: 0.44rem;
		margin-top: 0.84rem;
	}
	.tjfy-main{
		width: 6.55rem;
		height: 100%;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}
	.tjfy-main>div:nth-of-type(1){
		font-size: 0.44rem;
		font-weight: bold;
		color: black;
	}
	.tjfy-main>div:nth-of-type(2){
		margin-left: 2.5rem;
		color: #2a9a4e;
		
	}
	.tjfy-main>div{
		line-height: 0.44rem;
	}
	.xq{
		width: 100%;
		height: 1.77rem;
		margin-top: 0.45rem;
	}
	.xq-main{
		width: 6.55rem;
		height: 100%;
		margin: auto;
	}
</style>